<template>
  <div class="store">
    <!-- 顶部导航 -->
    <NavBar :title="FoodsShopInfo.title" left-text="返回" left-arrow @click-left="Back"></NavBar>
    <img src="https://cube.elemecdn.com/A/DA/E182B507B4EDE9F87B86BF4400545png.png" alt="" />
    <div class="store-main">
      <div class="store-main-title">
        <span>awa</span>
        <img src="" alt="" />
      </div>
      <div class="store-main-info">
        <Tabs color="#ffc400">
          <Tab v-for="(item, index) in storeData" :key="index" :title="item.name">
            <storeInfo :index="index" :FoodsData="item.data"></storeInfo>
          </Tab>
        </Tabs>
      </div>
      <!-- 信息栏 -->
    </div>

    <!-- 底部栏 -->
    <ActionBar>
      <ActionBarIcon icon="chat-o" text="客服"></ActionBarIcon>
      <ActionBarIcon icon="cart-o" text="购物车"></ActionBarIcon>
      <ActionBarIcon icon="shop-o" text="店铺"></ActionBarIcon>
      <ActionBarButton type="danger" text="立即购买"></ActionBarButton>
    </ActionBar>
  </div>
</template>

<script>

</script>

<script setup>
import { NavBar, ActionBar, ActionBarIcon, ActionBarButton, Tab, Tabs } from 'vant'
import { useRouter } from 'vue-router'
import { useStore,FoodsShoper } from '../../store/index'
import { storeToRefs } from 'pinia'
import storeInfo from '../../components/storeData.vue'

const router = useRouter()
const store = useStore()
const Foods = FoodsShoper()
const { storeData } = storeToRefs(store)
const {FoodsShopInfo} = storeToRefs(Foods)
// 返回上一级
const Back = () => {
  router.go(-1)
  // console.log(JSON.parse(JSON.stringify(FoodsShopInfo.value.pic)))
}

// Pinia--StoreData

</script>

<style lang="less" scoped>
.store {
  img {
    width: 100%;
    height: 250px;
    z-index: -2;
    position: sticky;
  }
  .store-main {
    height: 300px;
    background-color: #fff;
    margin-top: -60px;
    // z-index: 2 !important;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    .store-main-title {
      height: 60px;
    }
  }
}
</style>
